{include file='inc/pagestart.tpl'}
{include file='inc/header.tpl'}
{include file='inc/nav.tpl'}

    <div class="page">
      <div class="page-container">
<div class="container">
  <div class="row">
    <div class="span12"><a href="#newUserModal" data-toggle="modal" class="btn pull-right">New User</a>
      <h4 class="header">Users</h4>
      <div id="result">
        NO RESULT!
      </div><!-- END#result -->
      <table class="table table-striped sortable">
        <thead>
          <tr>
            <th>Full name</th>
            <th>Username</th>
            <th>Email</th>
            <th>Gender</th>
            <th>Birthday</th>
            <th>Cellphone</th>
            <th>Status</th>
            <th>Date Joined</th>
          </tr>
        </thead>
        <tbody>
          {foreach $data.users as $u}
          <tr>
            <td>{$u.fullname}</td>
            <td>{$u.username}</td>
            <td>{$u.email}</td>
            <td>{if $u.gender == 1}Male{elseif $u.gender == 0}Female{/if}</td>
            <td>{$u.birthday|date_format}</td>
            <td>{$u.cellphone}</td>
            <td>{if $u.status == 1}Activity{/if}</td>
            <td>{$u.createtime|date_format:'%Y-%m-%d'}</td>
            <td>
              <div class="btn-group">
                <button class="btn">Approve</button>
                <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Edit Username</a><a href="#">Disable Account</a><a href="#">Destroy</a></li>
                </ul>
              </div>
            </td>
          </tr>
          {/foreach}
        </tbody>
      </table>
      <div class="pagination pagination-centered">
        <ul>
          {if $data.prev}
            <li><a href="?p={$data.prev}">&laquo;</a></li>
          {else}
            <li class="disabled"><a href="javascript:;">&laquo;</a></li>
          {/if}
          {foreach $data.pageIndexsArr as $inds}
            <li {if $inds == $data.currPage}class="active"{/if} ><a href="?p={$inds}" title="Page {$inds}">{$inds}</a></li>
          {/foreach}
          {if $data.next}
            <li><a href="?p={$data.next}">&raquo;</a></li>
          {else}
            <li class="disabled"><a href="javascript:;">&raquo;</a></li>
          {/if}
        </ul>
      </div>
    </div>
  </div>
</div>
<div id="newUserModal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" data-dismiss="modal" aria-hidden="true" class="close">&times;</button>
    <h3>New User</h3>
  </div>
  <div class="modal-body">
    <form class="form-horizontal" id="addNewUserForm" action="comm/adduser.php" method="POST" enctype="multipart/form-data" />
      <div class="control-group">
        <label for="inputEmail" class="control-label">Email </label>
        <div class="controls">
          <input name="email" id="inputEmail" type="email" placeholder="Email" />
        </div>
      </div>
      <div class="control-group">
        <label for="inputCurrentUsername" class="control-label">Username </label>
        <div class="controls">
          <input name="username" id="inputCurrentUsername" type="text" placeholder="Username" />
        </div>
      </div>
      <div class="control-group">
        <label for="inputCurrentPassword" class="control-label">Password </label>
        <div class="controls">
          <input name="password" id="inputCurrentPassword" type="password" placeholder="Password" />
        </div>
      </div>
      <div class="control-group">
        <label for="inputCurrentAvatar" class="control-label">Avatar </label>
        <div class="controls">
          <input type="file" name="file" id="file">
        </div>
      </div>
      <div class="control-group">
        <label for="inputCurrentFullname" class="control-label">Full name </label>
        <div class="controls">
          <input name="fullname" id="inputCurrentFullname" type="text" placeholder="Full name" />
        </div>
      </div>
      <div class="control-group">
        <label for="inputCurrentGender" class="control-label">Gender </label>
        <div class="controls">
          <label class="radio inline"><input type="radio" name="gender" id="male" value="1" checked>Male</label>
          <label class="radio inline"><input type="radio" name="gender" id="female" value="2">Female</label>
        </div>
      </div>
      <div class="control-group">
        <label for="inputCurrentBirthday" class="control-label">Birthday </label>
        <div class="controls">
          <input name="birthday" id="inputCurrentBirthday" type="date">
        </div>
      </div>
      <div class="control-group">
        <label for="inputCurrentCellphone" class="control-label">Cellphone </label>
        <div class="controls">
          <input name="cellphone" id="inputCurrentCellphone" type="tel" placeholder="Cellphone" />
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <a href="#" data-dismiss="modal" class="btn">Close</a>
    <button type="submit" data-dismiss="modal" class="btn btn-primary">Save Changes</button>
  </div>
</div>
      </div>
    </div>
{include file='inc/footer.tpl'}

<script type="text/javascript">
// Bind the btn to submit a form
  $(function(){
    $('#newUserModal .btn-primary').click(function(){
      $('#addNewUserForm').submit();
    });
  });

/* Attach a submit handler to the form */
$("#addNewUserForm").submit(function(event) {

    /* Stop form from submitting normally */
    event.preventDefault();

    /* Clear result div*/
    $("#result").html('');

    /* Get some values from elements on the page: */
    var values = $(this).serialize();
    /* Send the data using post and put the results in a div */
    $.ajax({
        url: "comm/adduser.php",
        type: "post",
        data: values,
        success: function(data){
            $("#result").html('Submitted successfully');
            console.log(data);
        },
        error:function(){
            alert("failure");
            $("#result").html('There is error while submit');
        }
    });
});

</script>
{include file='inc/pageend.tpl'}